/**
 * Created by seeker910 on 2014/9/1.
 * @description 组件名称命名约定：继承container组件，名称以ViewPart结尾;继承control组件，名称以Part结尾
 * 产品展示模板
 */
Rsd.define('Rsd.hermit.sections.ProductViewPart', {
    extend: 'Rsd.container.Component',
    requires: [
        'Rsd.form.Label',
        'Rsd.form.Button',
        'Rsd.form.Image',
        'Rsd.form.Link'
    ],
    xtype: 'product-view', 
     /**
     * @description 标识该组件是否允许编辑
     */
    domEditable:false,
     /**
     * @description true:表示只允许在模板中修改
     */
    editInMaster:false,
    height: 1000,
    sizeUnit:'px', 
    /**
     * 数据源 schema
     */
    schema:{
        type:'object',
        title:'商品简要信息',
        properties:{
            'key':{
                type:'string',
                title:'商品SKU',
                default:''
            },
            "spm" :{
                //Site Promotion Management（网站推广管理）
                 type:'string',
                title:'推广码',
                default:''
            },
            "showAddCart":{
                type:'boolean',
                title:'显示添加到购物车',
                default:true
            }
        }
    },
    /**
     * {}
     */
    dataSource:null,
    layout: 'hbox',
    items: [
       {
            //xtype:'container',
            xtype: 'image',
            header:false,
            flex:1,
            height:'100%',
       },
       {
           xtype:'container',
           flex:1,
            height:'100%',
           layout:'vbox',
           items:[
                {
                    name:'title',
                    xtype:'label',
                    ctrlTagName:'h5',
                    width:'100%',
                    height:60,
                    text:'', 
                    style:{
                        lineHeight:60,
                        fontSize:'150%',
                        fontWeight:200
                    }
                },
                {
                    name:'price',
                    xtype:'label',
                    width:'100%',
                    height:60,
                    label:{content:'$',space:0,width:30,style:{color:'red'}},
                    text:'99.90',
                    style:{
                        fontSize:'200%',
                        fontWeight:200
                    }
                },
                {
                    xtype:'component-x',
                    width:'100%',
                    height:1,
                    style:{
                        backgroundColor:'#8080805e',
                    }
                },
                {
                    xtype:'list',
                    label:null,
                    height:200,
                    width:'100%',
                    itemXtype:'image',
                    layout:'hbox',
                    itemStyle:{
                        //height:150,
                        justifyContent:'center'
                    },
                    dataSource:[
                        {
                            flex:1, 
                            width:'100%', 
                            margin:'0 5 0 5',
                            style:{  
                                borderRadius:'5px',
                                border:'1px solid #80808012',
                            },
                            label:{position:'bottom',content:'S'}, 
                            src:'https://omo-oss-image.thefastimg.com/portal-saas/new2022090209574426609/cms/image/a0821deb-2738-4c5a-b780-90fb6719cad1.jpg'
                        },
                        {
                            flex:1,
                            width:'100%', 
                            margin:'0 5 0 5',
                            style:{  
                                borderRadius:'5px',
                                border:'1px solid #80808012',
                            },
                            label:{position:'bottom',content:'L'}, 
                            src:'https://omo-oss-image.thefastimg.com/portal-saas/new2022090209574426609/cms/image/a0821deb-2738-4c5a-b780-90fb6719cad1.jpg'
                        },
                        {
                            flex:1,
                            width:'100%', 
                            margin:'0 5 0 5',
                            style:{ 
                                borderRadius:'5px',
                                border:'1px solid #80808012',
                            },
                            label:{position:'bottom',content:'XL'}, 
                            src:'https://omo-oss-image.thefastimg.com/portal-saas/new2022090209574426609/cms/image/a0821deb-2738-4c5a-b780-90fb6719cad1.jpg'
                        },
                        {
                            flex:1,
                            width:'100%', 
                            margin:'0 5 0 5',
                            style:{  
                                borderRadius:'5px',
                                border:'1px solid #80808012',
                            },
                            label:{position:'bottom',content:'XXL'}, 
                            src:'https://omo-oss-image.thefastimg.com/portal-saas/new2022090209574426609/cms/image/a0821deb-2738-4c5a-b780-90fb6719cad1.jpg'
                        }
                    ],
                },
                {
                    xtype:'list',
                    width:'100%',
                    height:60,
                    flex:1,
                    dataSource:[
                        "Lorem ipsum dolor sit amet, sed do eiusmod tempor incidid",
                        "Lorem ipsum dolor sit amet, consectetur adipis elit",
                        "Duis aute irure dolor in reprehenderit in voluptateLorem ipsum dolor sit amet col",
                        "Ut enim ad minim veniam, quis nol exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
                    ]
                },
                 {
                    xtype:'number',
                    label:'Quantity'
                },
                {
                    layout:'hbox',
                    height:60,
                    items:[
                            {
                                    xtype:'button',
                                        height:40,
                                        width:120,
                                    text:'Buy Now'
                                },
                            
                                {
                                    xtype:'button',
                                    height:40,
                                     width:120,
                                    text:'Add Cart'
                                }
                    ]
                }
                
           ]
       }
    ],
    /**
     * 
     * @param {*} config 
     */
    constructor: function ProductViewPart(config) {
        config = config || {};
        Rsd.apply(this, config); 
    },
    /**
     * 
     */ 
    loadData:function loadData(data){
   
        var _data = data||this.dataSource||{};    //console.log(_data);
        this.dataSource = _data;
        if(_data.images)
        {
            this.items[0].setSrc(_data.images[0]);
            //backgroundImage 可以避开图片跨越问题
            //this.items[0].backgroundImage = 'url('+ _data.images[0]+ ')';
        }
       
        this.items[1].items[0].setText(_data.title||'');
        this.callParent();
        
    }
});